<template>
  <div class="filter-down" :class="{ down: open }">
    <transition name="van-fade">
      <div class="mask" @click="open = false" v-show="open"></div>
    </transition>
    <div
      class="filter-btn"
      :class="{ active: isActive && active }"
      @click="open = !open"
    >
      {{ selectValue || placeholder }}
      <img
        src="../../assets/down.svg"
        onload="SVGInject(this)"
        class="down-icon"
      />
    </div>
    <collapse-transition>
      <div
        class="downmenu"
        :class="{ [align]: 1, multi: mode === 'multi' }"
        v-show="open"
      >
        <div
          class="item"
          v-for="(val, i) in data"
          :class="{ active: isSelect(val.value) }"
          :key="i"
          @click="selectMenu(val.value)"
        >
          {{ val.title }}
        </div>
      </div>
    </collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    value: null,
    data: Array,
    active: {
      type: Boolean,
      default: () => false, // multi
    },
    mode: {
      type: String,
      default: () => "single", // multi
    },
    align: {
      type: String,
      default: () => "left",
    },
    placeholder: {
      type: String,
      default: () => "选择",
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      open: false,
    };
  },
  watch: {
    open() {
      window.scroll.lockScroll();
      document.querySelector(".main-page").style.overflowY = this.open
        ? "hidden"
        : "auto";
    },
  },
  computed: {
    isActive() {
      if (this.mode == "single") return !!this.value;
      else {
        if (this.value) return this.value.length;
        return !!this.value;
      }
    },
    selectValue() {
      let textArr = [],
        value = [];
      if (!Array.isArray(this.value)) {
        value = [this.value];
      } else value = this.value;

      value.forEach((val) => {
        this.data.some((item) => {
          if (item.value === val) {
            textArr.push(item.title);
            return true;
          }
        });
      });

      return textArr.join(",");
    },
  },
  methods: {
    isSelect(val) {
      let value = [];
      if (!Array.isArray(this.value)) value = [this.value];
      else value = this.value;

      return value.indexOf(val) !== -1;

      if (this.mode == "single") {
        return this.value == val;
      } else {
        let value = this.value.split(",");
        return value.indexOf(val) !== -1;
      }
    },
    selectMenu(val) {
      if (this.mode == "single") {
        if (this.value === val) this.$emit("change", null);
        else this.$emit("change", val);
        this.open = false;
      } else {
        let value = [];
        if (!Array.isArray(this.value)) value = [this.value];
        else value = this.value;
        if (value.indexOf(val) === -1) {
          value.push(val);
        } else {
          value.splice(value.indexOf(val), 1);
        }
        this.$emit("change", value);
      }
      this.$emit("update");
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-down {
  display: inline-block;
  width: 0.6rem;
  height: 0.3rem;
  border-radius: 4px;
  font-size: 0.12rem;
  line-height: 0.28rem;
  text-align: center;
  position: relative;
  cursor: pointer;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  &.down {
    .filter-btn {
      z-index: 2;
      .down-icon {
        transform: rotate(0deg);
      }
    }
  }
  .filter-btn {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ebebeb;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0 0 0.07rem;
    &.active {
      border: 1px solid #ff8a69;
      color: #ff8a69;
      .down-icon {
        ::v-deep {
          polygon {
            fill: #ff8a69;
            stroke: #ff8a69;
          }
        }
      }
    }
    .down-icon {
      position: relative;
      top: -0.02rem;
      margin-left: 0.05rem;
      width: 0.06rem;
      height: 0.04rem;
      transform: rotate(180deg);
      transition: all 0.3s;
    }
  }
  .downmenu {
    z-index: 2;
    display: block;
    position: absolute;
    top: 100%;
    width: 1.6rem;
    text-align: left;
    background: #ffffff;
    border-radius: 4px;
    padding-bottom: 0.06rem;
    margin-top: 0.06rem;
    white-space: pre-wrap;
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
    &.center {
      left: 50%;
      transform: translateX(-50%);
    }
    .item {
      margin-left: 0.054rem;
      margin-top: 0.06rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 0.72rem;
      height: 0.3rem;
      background: #f2f2f2;
      border-radius: 0.05rem;
      box-sizing: border-box;
      font-size: 0.12rem;
      font-weight: 400;
      color: #333333;
      &.active {
        background: #ffffff;
        border: 1px solid #ff8a69;
        color: #ff8a69;
      }
    }
    &.multi {
      .active {
        background-image: url(../../assets/right_close.svg);
        background-repeat: no-repeat;
        background-position: right top;
      }
    }
  }
}
</style>
